{extend name='public/base' /}
{block name='content'}
{include file='public/content_header' /}
<style>
    .tishi{
        color: #5cb85c;
        position: absolute;
        z-index: 5;
        left: 220px;
        width: 100%;
        top: 5px;
        font-size: 14px;
    }

</style>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <!-- 表单头部 -->
                <div class="box-header with-border">
                    <div class="btn-group">
                        <a class="btn flat btn-sm btn-default BackButton">
                            <i class="fa fa-arrow-left"></i>
                            返回
                        </a>
                    </div>
                </div>
                <!-- 表单 -->
                <form id="dataForm" class="form-horizontal dataForm" action="" method="post"
                      enctype="multipart/form-data" onkeydown="if(event.keyCode===13){return false;}">
                    <!-- 表单字段区域 -->
                    <div class="box-body">
                        <div class="form-group">
                            <label for="performance_time" class="col-sm-2 control-label">绩效日期</label>
                            <div class="col-sm-10 col-md-4">
                                <input id="performance_time" name="performance_time"
                                       value="{$data.performance_time|default=''}" placeholder="请选择绩效日期" type="text"
                                       class="form-control filed-datetime"  autocomplete="off">
                            </div>
                        </div>
                        <script>
                            var currentTime ='';
                            if ($('#performance_time').val()) {
                                currentTime = $('#performance_time').val();
                            }
                            laydate.render({
                                elem: '#performance_time',
                                type: 'month',
                                value:currentTime,
                                btns:[],
                                ready: function (date) {
                                    $(".layui-laydate").on('click', 'ul li', function () {
                                        $(".layui-laydate").remove();
                                    });
                                },
                                change: function (value) {
                                    $("#performance_time").val(value);
                                    let departmentId = $('#department_id').val();
                                    let time = value;
                                    let option = "Performance";
                                    if (departmentId){
                                        $.ajax({
                                            url: "{:url('attendance/getStaffByDepartmentId')}",
                                            type: "post",
                                            data: {"departmentId": departmentId,'time':time,'option':option},
                                            dataType: "json",
                                            sync: false,
                                            success: function (res) {
                                                if (res.code===0){
                                                    layer.alert(res.msg, {
                                                        icon: 0,
                                                        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                                                    })
                                                    $('#staff_id').empty();
                                                    return false;
                                                } else {

                                                    $('#staff_id').empty();
                                                    $('#staff_id').append(`<option value=""></option>`);
                                                    var _html = '';
                                                    $.each(res.data,function (e,v) {

                                                        _html  +=
                                                            `<option value="${v.id}">${v.name}</option>`
                                                        ;
                                                    })
                                                    $('#staff_id').append(_html).trigger('change.select2');
                                                    $('#staff_id').select2();
                                                    $('#department_id-error').empty();
                                                    $('#staff_id-error').empty();
                                                }
                                            }
                                        })
                                    }
                                },
                            });
                        </script>
                        <div class="form-group">
                            <label for="department_id" class="col-sm-2 control-label">部门</label>
                            <div class="col-sm-10 col-md-4">
                                <select name="department_id" {if isset($data) &&
                                        isset($data.staff_id)} disabled=true{/if}  id="department_id" class="form-control field-select"
                                        data-placeholder="请选择部门">
                                    <option value=""></option>
                                    {$department_list|raw}
                                </select>
                            </div>
                        </div>
                        <script>
                            $('#department_id').select2();
                            $('#department_id').change(function () {
                                let departmentId = $(this).val();
                                let depart_type = $("#department_id option:selected").attr('data-type');
                                if (depart_type==='1'){
                                    $('#score').attr('max',120);
                                    $('.tishi').text('最大绩效得分120')
                                }
                                if (depart_type==='2'){
                                    $('#score').attr('max',100);
                                    $('.tishi').text('最大绩效得分100')

                                }
                                let time = $('#performance_time').val();
                                let option = "Performance";
                                if (time){
                                    $.ajax({
                                        url: "{:url('performance/getStaffByDepartmentId')}",
                                        type: "post",
                                        data: {"departmentId": departmentId,'time':time,'option':option},
                                        dataType: "json",
                                        sync: false,
                                        success: function (res) {
                                            if (res.code===0){
                                                layer.alert(res.msg, {
                                                    icon: 0,
                                                    skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                                                })
                                                $('#staff_id').empty();
                                            } else {

                                                $('#staff_id').empty();
                                                $('#staff_id').append(`<option value=""></option>`);
                                                var _html = '';
                                                $.each(res.data,function (e,v) {

                                                    _html  +=
                                                        `<option value="${v.id}">${v.name}</option>`
                                                    ;
                                                })
                                                $('#staff_id').append(_html).trigger('change.select2');
                                                $('#staff_id').select2();
                                                $('#department_id-error').empty();
                                                $('#staff_id-error').empty();
                                            }
                                        }
                                    })
                                }else {
                                    layer.alert('请选择时间',{icon:0})
                                }

                            });

                        </script>
                        <div class="form-group">
                            <label for="staff_id" class="col-sm-2 control-label">员工</label>
                            <div class="col-sm-10 col-md-4">
                                <select name="staff_id" id="staff_id" {if isset($data) &&
                                        isset($data.staff_id)} disabled=true{/if}  class="form-control field-select"
                                        data-placeholder="请选择员工">
                                    {if isset($data)}
                                    <option value=""></option>
                                    {foreach name='staff_list' id='item'}
                                    <option value="{$item.id}" {if isset($data) &&
                                            $data.staff_id==$item.id}selected{/if}>
                                        {$item.name}
                                    </option>
                                    {/foreach}
                                    {/if}
                                </select>
                            </div>
                        </div>
                        <script>
                            $('#staff_id').select2();
                            $('#staff_id').on("select2:open",function (e) {
                                if ($("#department_id").val() === ''){
                                    layer.alert('请先选择部门', {
                                        icon: 0,
                                    })
                                }
                            });

                            $('#staff_id').on("change",function (e) {
                                let staff_id = $('#staff_id').select2('val');
                                let time = $("#performance_time").val();

                                $.ajax({
                                    type: 'post',
                                    async:false,
                                    data:{'staff_id':staff_id,'performance_time':time},
                                    url: "{:url('Performance/nameUnique')}",
                                    dataType: 'json',
                                    success: function (result) {
                                        if (result.code == 0) {
                                            layer.alert('已存在此员工'+time+'信息', {
                                                icon: 0,
                                            })
                                        }
                                        else {
                                        }
                                    },
                                    error: function () {
                                    }
                                });
                            });
                        </script>
                        <div class="form-group">
                            <label for="score" class="col-sm-2 control-label">绩效得分</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="score" name="score" value="{$data.score|default=''}"
                                           placeholder="请输入绩效得分" type="number" max="120" class="form-control field-number"><span class="tishi" style="color: #5cb85c">最大绩效得分120</span>
                                </div>
                            </div>
                        </div>
<!--                        <script>-->
<!--                            $('#score')-->
<!--                                .bootstrapNumber({-->
<!--                                    upClass: 'success',-->
<!--                                    downClass: 'primary',-->
<!--                                    center: true-->
<!--                                });-->
<!--                        </script>-->
                        <div class="form-group">
                            <label for="bonus" class="col-sm-2 control-label">奖金</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="bonus" name="bonus" value="{$data.bonus|default=''}"
                                           placeholder="请输入奖金" type="number" class="form-control field-number">
                                </div>
                            </div>
                        </div>
<!--                        <script>-->
<!--                            $('#bonus')-->
<!--                                .bootstrapNumber({-->
<!--                                    upClass: 'success',-->
<!--                                    downClass: 'primary',-->
<!--                                    center: true-->
<!--                                });-->
<!--                        </script>-->

                        <div class="form-group">
                            <label for="remarks" class="col-sm-2 control-label">备注</label>
                            <div class="col-sm-10 col-md-4">
                                <input id="remarks" name="remarks" value="{$data.remarks|default=''}" placeholder="请输入备注" type="text" class="form-control field-text">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="file" class="col-sm-2 control-label">附件</label>
                            <div class="col-sm-10 col-md-4">
                                <input id="file" name="file[]" placeholder="请上传附件" multiple="multiple" type="file"
                                       class="form-control field-multi-image">
                            </div>
                        </div>
                        <script>
                            $(function () {
                                $('#file').fileinput({
                                    "initialPreview": false,
                                    overwriteInitial: true,
                                    language: 'zh',
                                    browseLabel: '浏览',
                                    initialPreviewAsData: true,
                                    initialPreviewShowDelete: false,
                                    dropZoneEnabled: false,
                                    showUpload: false,
                                    showRemove: false,
                                    allowedFileTypes: ['image'],
                                    //默认限制10M
                                    maxFileSize: 40240,
                                {if isset($data) && $data->getData('file')}
                                initialPreview:{$data->getData('file')|raw},
                                {/if}
                                });
                            })
                        </script>

                    </div>
                    <!-- 表单底部 -->
                    <div class="box-footer">
                        {:token()}
                        <div class="col-sm-2">
                        </div>
                        <div class="col-sm-10 col-md-4">
                            {if !isset($data)}
                            <div class="btn-group pull-right">
                                <label class="createContinue">
                                    <input type="checkbox" value="1" id="_create" name="_create"
                                           title="继续添加数据">继续添加</label>
                            </div>
                            {/if}
                            <div class="btn-group">
                                <button type="submit" class="btn flat btn-info dataFormSubmit">
                                    保存
                                </button>
                            </div>
                            <div class="btn-group">
                                <button type="reset" class="btn flat btn-default dataFormReset">
                                    重置
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<script>
    /** 表单验证 **/
    var url = window.location.href;
    var flag = true;
    if (url.indexOf('edit')>=0){
        flag = false;
    }
    jQuery.validator.addMethod("checkname", function (value, element) {
        var resultval = false;
        jQuery.ajax({
            type: 'post',
            async:false,
            data:{'staff_id':value,'performance_time':$('#performance_time').val()},
            url: "{:url('performance/nameUnique')}",
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    resultval = false;
                }
                else {
                    resultval = true;
                }
            },
            error: function () {
            }
        });
        return resultval;

    }, "您的名称重复，请重新输入");
    $('#dataForm').validate({
        rules: {
            'staff_id': {
                required: true,
                checkname:flag,
            },
            'department_id': {
                required: true,
            },
            'score': {
                required: true,
            },
            'performance_time': {
                required: true,
            },

        },
        messages: {
            'staff_id': {
                required: "员工不能为空",
                checkname: '此员工信息已存在',
            },
            'department_id': {
                required: "部门不能为空",
            },
            'score': {
                required: "绩效得分不能为空",
            },
            'performance_time': {
                required: "绩效日期不能为空",
            },

        }
    });
</script>
{/block}